/*! Reset Module */
* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

h2,
h5 {
    font-weight: normal;
}

h2 {
    font-size: 1.56vw;
    line-height: 2.86vw;
}

h5 {
    font-size: 0.833vw;
}
/*! Reset Module End */

/*! Components Module */
.act-boxes {
    max-width: 1190px;
    min-height: 100vh;
    margin: 0 auto;
    overflow-x: hidden;
}

.act-boxes-hgroup {
    margin-top: 3.125vw;
    margin-bottom: 3.125vw;
    text-align: center;
}

.act-boxes-lists {
    display: flex;
    flex-wrap: wrap;
}

.act-boxes-item {
    /* flex-basis: 24.25%;
    margin-right: 1%;
    margin-bottom: 2%; */
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
}

.act-boxes-item:hover {
    -webkit-box-shadow: 0 0 20px #e7e7e7;
       -moz-box-shadow: 0 0 20px #e7e7e7;
        -ms-box-shadow: 0 0 20px #e7e7e7;
         -o-box-shadow: 0 0 20px #e7e7e7;
            box-shadow: 0 0 20px #e7e7e7;
}

.act-boxes-item:nth-child(4n) {
    margin-right: 0;
}

.act-boxes-rahmen {
    position: relative;
    width: 100%;
    height: 152px;
    background: url('https://cdn.11cm.com.cn/yezi/WebStore/Store1812/logo.png') no-repeat center / 25%;
    overflow: hidden;
}

.act-boxes-rahmen > img{
    width: 100%;
    height: auto;
}

.act-boxes-rahmen [class^='rahmen-status'] {
    position: absolute;
    top: 15.466vw;
    left: 0;
    z-index: 888;
    /* width: 10.666vw; */
    height: 4vw;
    padding: 0 1vw;
    text-align: center;
    line-height: 4vw;
    font-size: 2.666vw;
    color: #fff;
    white-space: nowrap;
}

.act-boxes-rahmen .rahmen-status-0 {
    background: linear-gradient(to right, #24ceff, #30aefb);
}

.act-boxes-rahmen .rahmen-status-1 {
    background: linear-gradient(to right, #ffc323, #fba330);
}

.act-boxes-rahmen .rahmen-status-2 {
    background-color: #828282;
}

.act-boxes-info {
    display: flex;
    /* height: 162px; */
    padding: 16px;
    border-width: 1px;
    border-style: solid;
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    flex-direction: column;
    justify-content: space-between;
}

.act-boxes-title {
    height: 40px;
    margin: 0 0 5px 0;
}

.act-boxes-time,
.act-boxes-site {
    width: 100%;
    display: flex;
    align-items: center;
    line-height: normal;
    margin: 5px 0 0 0;
}

.act-boxes-time>i.van-icon,
.act-boxes-site>i.van-icon{
    font-size: 16px;
    margin: 0 10px 0 0;
}

.act-boxes-time>span,
.act-boxes-site>span{
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.act-boxes-tips {
    display: flex;
    margin-top: 12px;
    justify-content: space-between;
}
/*! Components Module End */

/*! Buttons Module */
.act-btn-other {
    width: 110px;
    height: 36px;
    line-height: 36px;
    margin: 36px auto 50px;
    text-align: center;
    border: 1px solid #d2d6df;
    border-radius: 4px;
    cursor: pointer;
}
/*! Buttons Module End */

/*! Basic Module */
.act-els {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.act-double-els {
    display: -webkit-box;
    overflow : hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/*! Basic Module End */

/*! Colors Module */
.act-bc-silver {
    background-color: #e7e7e7;
}

.act-bc-white {
    background-color: #fff;
}

.act-green {
    color: #00bcd4;
}

.act-black {
    color: #28292d;
}

.act-gray {
    color: #898989;
}

.act-b-silver {
    border-color: #e7e7e7;
}
/*! Colors Module End */

/*! Media Module */
@media screen and (min-width: 768px) {  
    h2 {
        font-size: 2em;
        line-height: 2.4em;
    }

    h5 {
        font-size: 1.5em;
    }

    .act-boxes {
        display: flex;
        flex-direction: column;
        width: 60%;
        margin: 5px auto;
        max-width: 60%;
        box-sizing: border-box;
    }

    .act-boxes-hgroup {
        margin: 10px 0;
        text-align: center;
    }
    
    .act-boxes-lists{
        margin: 20px 0 0 0;
        justify-content: space-between;
    }

    .act-boxes-item {
        width: 32%;
        margin: 5px 0 10px 0;
        box-sizing: border-box;
    }

    .act-boxes-rahmen {
        width: 100%;
        height: 10.14vw;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .act-boxes-rahmen [class^='rahmen-status'] {
        top: 1vw;
        /* width: 60px; */
        height: 20px;
        line-height: 20px;
        font-size: 1em;
    }
    
    .act-boxes-rahmen > img{
        width: 100%;
        height: 100%;
    }

    .act-boxes-info {
        min-height: 160px;
    }
}

@media screen and (max-width: 768px) {
    h2 {
        font-size: 4.8vw;
        line-height: 5.6vw;
    }

    h5 {
        font-size: 3.2vw;
    }

    .act-boxes {
        width: 100vw;
        max-width: 100vw;
    }
    
    .act-boxes-hgroup {
        /* margin-top: 16vw; */
        margin-bottom: 4vw;
        text-align: center;
    }
    
    .act-boxes-item {
        flex-basis: 100vw;
        display: flex;
        padding: 3.2vw;
        margin-right: 0;
        margin-bottom: 0;
        border-bottom: 1px solid #e6e6e6;
    }

    .act-boxes-item:first-child {
        border-top: 1px solid #e6e6e6;
    }
    
    .act-boxes-rahmen {
        width: 45vw;
        height: 23.75vw;
    }
    
    .act-boxes-info {
        position: relative;
        width: 45.4vw;
        height: auto;
        padding: 0;
        padding-left: 3.2vw;
        font-size: 3.2vw;
        border: none;
        box-sizing: border-box;
    }

    .act-boxes-title {
        height: 10vw;
        font-size: 3.6vw;
        margin-bottom: 2vw;
    }
    
    .act-boxes-time,
    .act-boxes-site {
        /* height: 4vw;
        line-height: 4vw; */
    }

    .act-boxes-tips {
        margin-top: 2vw;
    }

    .act-btn-other {
        width: 100vw;
        height: 12vw;
        line-height: 12vw;
        margin: 0;
        text-align: center;
        font-size: 4.2vw;
        border: none;
        border-radius: 0;
        cursor: pointer;
        background-color: #00bcd4;
        color: #fff;
    }
}
/*! Media Module End */